<template>
  <el-card>
    <el-table border :data="skuList" v-loading="loading">
      <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{row}">
          <el-image :src="row.skuDefaultImg" :alt="row.skuName" style="width:100px;height:100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" width="240px" align="center">
        <template v-slot='{row,$index}'>
          <el-tooltip class="box-item" v-if="row.isSale===0" effect="dark" content="上架" placement="top">
            <el-button type="success" size="small" :icon="Top" @click="skuOnSale(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" v-else effect="dark" content="下架" placement="top">
            <el-button type="danger" size="small" :icon="Bottom" @click="skuCancelSale(row)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="修改Sku" placement="top">
            <el-button type="primary" size="small" :icon="Edit"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="查看Sku详情" placement="top" >
            <el-button type="info" :icon="InfoFilled" size="small" @click="getSkuInfo(row.id)"></el-button>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="删除Sku" placement="top">
            <el-button type="danger" size="small" :icon="Delete" @click="deleteSkuInfo(row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页  -->
    <el-pagination
    style="text-align: center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :pager-count="7"
      :page-sizes="[3, 5, 8, 10, 15]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="total"
      >
    </el-pagination>

    <!-- 抽屉效果 -->
    <el-drawer
    v-model="drawer"
    title="查看sku详情"
    :direction="direction"
    size="40%"
  >
   <el-row :gutter="10">
    <el-col :span="7">
      <div>名称</div>
    </el-col>
    <el-col :span="17">
      <div>{{skuInfo.skuName}}</div>
      </el-col>
   </el-row>
   <el-row :gutter="10">
    <el-col :span="7">
      <div>描述</div>
    </el-col>
    <el-col :span="17"><div>{{skuInfo.skuDesc}}</div></el-col>
   </el-row>
   <el-row :gutter="10">
    <el-col :span="7">
      <div>价格</div>
    </el-col>
    <el-col :span="17"><div>{{skuInfo.price}}</div></el-col>
   </el-row>
   <el-row :gutter="10">
    <el-col :span="7">
      <div>平台属性</div>
    </el-col>
    <el-col :span="17">
      <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id">{{attrValue.valueName}}</el-tag>
    </el-col>
   </el-row>
   <el-row :gutter="10">
    <el-col :span="7">
      <div>销售属性</div>
    </el-col>
    <el-col :span="17"><el-tag v-for="saleAttrValue in skuInfo.skuSaleAttrValueList" 
    :key="saleAttrValue.id">{{saleAttrValue.saleAttrValueName}}</el-tag></el-col>
   </el-row>
   <el-row :gutter="10">
    <el-col>
      <el-carousel height="250px">
      <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
        <el-image :src="item.imgUrl" style="width:80%;height:100%;"></el-image>
      </el-carousel-item>
    </el-carousel>
    </el-col>
    <el-col>
      
    </el-col>
   </el-row>
  </el-drawer>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Sku'
}
</script>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { InfoFilled, Edit, Delete, Top, Bottom } from '@element-plus/icons-vue'
import { reqDeleteSku, reqGetAllSkuListData,reqGetCancelSale,reqGetOneSkuInfo,reqGetOnSale } from '@/api/product/sku'

const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(1)
const skuList = ref([])

// 定义一个skuInfo对象 用来渲染抽屉中的数据
const skuInfo = ref([])

// 抽屉相关的变量
const drawer = ref(false)
const direction = ref('rtl')



// 分页器相关的变量
const small = ref<boolean>(false);
const background = ref<boolean>(false);
const disabled = ref<boolean>(false);

// 1. 定义一个获取SkuList数据列表的函数
const getAllSkuListData = async () => {
  loading.value = true
  const result = await reqGetAllSkuListData(currentPage.value, pageSize.value)
  skuList.value = result.records
  total.value = result.total
  loading.value = false
}

// 2. 当组件挂载完毕
onMounted(() => {
  getAllSkuListData()
})

//  分页器相关的两个事件
// 3. 更改每页显示器条数时触发的事件处理程序
const handleSizeChange = (val: number) => {
  // val === pageSize
  pageSize.value = val;
  currentPage.value = 1; // 把当前页码再重置为1
  // 重新发送请求,获取数据
  getAllSkuListData();
};
// 4. 根据当前页面进行切换时触发的函数
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  // 重新发送请求,获取新页码中的数据
  getAllSkuListData();
};

// 5. sku上架
const skuOnSale = async(row)=>{
  await reqGetOnSale(row.id)
  row.isSale = 1- row.isSale
}
// 6. sku下架
const skuCancelSale = async(row)=>{
  await reqGetCancelSale(row.id)
  row.isSale = 1- row.isSale
}
// 7. 删除数据
const deleteSkuInfo = async(id:number)=>{
  await reqDeleteSku(id)
}

// 查看skuInfo详情信息
const getSkuInfo = async(id:number)=>{
  const result = await reqGetOneSkuInfo(id)
  // console.log('drawer',result);
  drawer.value = true
  skuInfo.value = result
}
</script>


<style>
</style>